<template>
	<view class="container">
		<view class="body flex-c">
			<image class="big-image" src="@/public/images/downpage/down_1.jpg" mode="widthFix"></image>
			<image class="big-image" src="@/public/images/downpage/down_2.jpg" mode="widthFix"></image>
			<image class="big-image" src="@/public/images/downpage/down_3.jpg" mode="widthFix"></image>
			<image class="big-image" src="@/public/images/downpage/down_4.jpg" mode="widthFix"></image>
			<view class="btn-box flex-r">
				<view class="close-button flex-r" @tap="close">
					<text>关闭</text>
				</view>
			</view>
		</view>
		<view class="foot flex-r">
			<view class="button flex-r mr30" @tap="click(1)">
				<image src="@/public/images/downpage/iphone.png" mode="aspectFit"></image>
				<text space="ensp">iphone 下载</text>
			</view>
			<view class="button flex-r" @tap="click(2)">
				<image src="@/public/images/downpage/Android.png" mode="aspectFit"></image>
				<text space="ensp">Android 下载</text>
			</view>
		</view>
		<!-- <view class="full-screen" v-if="showToast && popupCoupon">
			<view class="success coupon flex-c">
				<view class="content flex-c">
					<image class="bgimg" src="@/public/images/other/zsfl_bg.png" mode="aspectFill"></image>
					<view class="info flex-c" @tap="receiveCoupon">
						<image src="@/public/images/other/ljlq.png" mode="aspectFit"></image>
					</view>
					<text class="desc">*优惠券仅限APP内消费使用</text>
				</view>
				<view class="close flex-c" @tap="showToast = false">
					<image src="@/public/images/other/qdqxan.png" mode="aspectFit"></image>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import Downguide from '@/components/ch-appdown/ch-downguide.js'
	export default {
		data() {
			return {
				canClose: false,
				
				popupCoupon: null,
				showToast: false
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			}
		},
		onLoad() {
			if(!this.$store.state.isLogin){
				this.canClose = true
				let random = this.$CHS.randomString(10) + Date.now()
				this.$goByName('downapp', {random})
				return
			}
		},
		beforeRouteLeave(to, from, next) {
			if(this.canClose){
				next();
			}else{
				next(false);
			}
		},
		methods: {
			click(type) {
				let ua = navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == "micromessenger"){
					Downguide({show: true})
				}else{
					this.canClose = true
					if(type == 1){
						const ios_url = this.$CHS.config.iosAppUrl
						location.href = ios_url
					}else{
						const android_url = this.$CHS.config.androidAppUrl
						location.href = android_url
					}
				}
			},
			close(){
				this.canClose = true
				this.$Router.replaceAll({name: 'index'})
			},
			//查询领券弹窗
			getCouponPopup(userType) {
				this.$http.get({
					url: '/api/appUser/querySpecialUserReceiveCoupon',
					data: {
						userId: this.user.userId,
						userType
					}
				}).then(data => {
					console.log(data);
					if(data.success && data.result){
						this.popupCoupon = data.result
						this.showToast = true
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//领取优惠券
			receiveCoupon() {
				if(this.popupCoupon){
					console.log(this.popupCoupon);
					let couponIds = ''
					this.popupCoupon.forEach( (item, index) => {
						if(!item.isReceive){
							if(index != this.popupCoupon.length-1){
								couponIds = couponIds + item.awardCouponId + ','
							}else{
								couponIds = couponIds + item.awardCouponId
							}
						}
					})
					this.$http.post({
						url: '/api/appUser/receiveCouponsByUserId',
						data: {
							couponIds,
							sourceFrom: 'special',
							userId: this.user.userId
						},
					}).then(data => {
						console.log(data);
						if(data.success){
							this.showToast = false
							uni.showToast({
								title: '领取成功！',
								icon: 'success'
							})
							this.$ShowToast({text: '领取成功，请下载APP使用优惠券', type: 1, time: 3})
							sessionStorage.removeItem('specialCode')
						}else{
							uni.showToast({
								title: data.message || '优惠券领取失败，请重试',
								icon: 'none'
							})
						}
					}).catch((err) => {
						console.log(err)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
		min-height: calc(100vh - var(--vh-offset, 0px) - var(--safe-area-inset-bottom));
		background: #021E83;
		.body{
			max-width: $max-width;
			margin: $pc-margin;
			width: 100%;
			.big-image{
				width: 100%;
			}
			.btn-box{
				margin-top: 20rpx;
				justify-content: flex-end;
				.close-button{
					margin-right: 30rpx;
					width: 142rpx;
					height: 64rpx;
					background: #4762C4;
					border-radius: 32rpx;
					align-items: center;
					justify-content: center;
					text{
						font-size: 28rpx;
						line-height: 64rpx;
						color: #E1E6FA;
					}
				}
			}
			padding-bottom: calc(174rpx + var(--safe-area-inset-bottom));
		}
		.foot{
			max-width: $max-width;
			margin: $pc-margin;
			padding: 24rpx 0 calc(24rpx + var(--safe-area-inset-bottom));
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #0327A6;
			align-items: center;
			justify-content: center;
			.button{
				&.mr30{
					margin-right: 30rpx;
				}
				background-image: url("~@/public/images/downpage/btn_bg.png");
				background-size: 100%;
				width: 330rpx;
				height: 96rpx;
				border-radius: 48rpx;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #00FFF6;
				image{
					width: 48rpx;
					height: 49rpx;
					margin-right: 20rpx;
				}
			}
		}
		.full-screen{
			z-index: 10000;
			width: 100%;
			.success{
				align-items: center;
				margin-top: 180rpx;
				.content{
					align-items: center;
					position: relative;
					height: 790rpx;
					.bgimg{
						width: 660rpx;
						height: 720rpx;
					}
					.info{
						position: absolute;
						bottom: 0;
						align-items: center;
						height: 140rpx;
						image{
							width: 440rpx;
							height: 140rpx;
						}
					}
				}
				.close{
					align-items: center;
					margin-top: 60rpx;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
				&.coupon{
					.content{
						height: 848rpx;
						.bgimg{
							width: 660rpx;
							height: 848rpx;
						}
						.info{
							height: 96rpx;
							bottom: 50rpx;
							image{
								width: 480rpx;
								height: 96rpx;
							}
						}
						.desc{
							position: absolute;
							bottom: 170rpx;
							//right: 80rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>